<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="bootstrap-4.5.0-dist/js/bootstrap.js"></script>
    <style>
        .head{
            width: 100%;
            height: 80px;
            border:3px solid #006440;
        }
        .head img{
            position: absolute;
            top: 15px;
            left: 20px;
            z-index: 4;
        }
        .head h1{
            position: absolute;
            top: 15px;
            left: 80px;
        }
        .body{
            width: 100%;
            height: 500px;
            
        }
        .left{
            float: left;
            width:20%;
           
        }
        .right{
            float: left;
            width: 80%;
             
        }
        .btn-group-vertical{
             position: relative;
             top: 10px;
             left: 10px;
        }
        .btn-group-vertical button{
            color: #006440;
            width: 150px;
            height: 50px;
        }
        .button{
            margin: 20px;
        }
        .button  a{
            color: #fff;
            background-color: #006440;
            width: 100px;
            padding: 10px;   
        }
        .button button{
            color: #fff;
            background-color: #006440;
            width: 100px;
            padding: 10px;   
        }
        table img{
            width: 20px;
            height: 20px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="logo.svg" alt="">
        <h1>星巴克首页管理系统</h1>
    </div>
    <div class="body">
        <div class="left">
            <div class="btn-group-vertical">
                <button type="button" class="gu" >顾客管理系统</button>
                <button type="button" class="dian">店长管理系统</button>
                <button type="button" class="shang">商品管理系统</button>
            </div>
        </div>
        <div class="right">
            <div class="button">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalone">
                       添加
                </button>
  
  <!-- Modal -->
                <div class="modal fade" id="exampleModalone" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">添加界面</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-row">
                                      <div class="form-group col-md-6">
                                        <label for="inputPassword4">顾客姓名</label>
                                        <input class="form-control form-control-lg" type="text" placeholder="请输入顾客姓名">
                                      </div>
                                      <!-- <div class="form-group col-md-6">
                                        <label for="inputPassword4">顾客性别</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                            <label class="form-check-label" for="inlineCheckbox1">男</label>
                                          </div>
                                          <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                                            <label class="form-check-label" for="inlineCheckbox2">女</label>
                                          </div>
                                      </div> -->
                                    </div>
                                    <div class="form-group">
                                      <label for="inputAddress">顾客电话</label>
                                      <input type="text" class="form-control" id="inputAddress" placeholder="请输入顾客电话">
                                    </div>
                                    <!-- <div class="form-group">
                                      <label for="inputAddress2">Address 2</label>
                                      <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                    </div> -->
                                    <div class="form-row">
                                      <div class="form-group col-md-6">
                                        <label for="inputCity">顾客地址</label>
                                        <input type="text" class="form-control" id="inputCity">
                                      </div>
                                      <div class="form-group col-md-4">
                                        <label for="inputState">性别</label>
                                        <select id="inputState" class="form-control">
                                          <option selected>女</option>
                                          <option>男</option>
                                        </select>
                                      </div>
                                      <div class="form-group col-md-2">
                                        <label for="inputZip">Zip</label>
                                        <input type="text" class="form-control" id="inputZip">
                                      </div>
                                    </div>
                                    <div class="form-group">
                                      <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="gridCheck">
                                        <label class="form-check-label" for="gridCheck">
                                          Check me out
                                        </label>
                                      </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                  </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary">确认添加</button>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    批量删除
                </button>
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">确定删除吗？</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                               本次删除后将彻底不存在该数据。
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary">确认删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">顾客编号</th>
                    <th scope="col">顾客姓名</th>
                    <th scope="col">电话</th>
                    <th scope="col">性别</th>
                    <th scope="col">居住地址</th>
                    <th scope="col">编辑删除</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th><input type="checkbox" name="category"/></th>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>19462358461</td>
                    <td><label><input type="radio" name="sex" value="男生">男</label>
                        <label><input type="radio" name="sex" value="女生">女</label></td>
                    <td>
                        你猜
                    </td>
                    <td>
                        <img src="bianji.png" alt="">
                        <img src="shanchu.png" alt="">
                    </td>
                  </tr>
                  <tr>
                    <th><input type="checkbox" name="category"/></th>
                    <th scope="row">2</th>
                    <td>Mark</td>
                    <td>19462358461</td>
                    <td><label><input type="radio" name="sex" value="男生">男</label>
                        <label><input type="radio" name="sex" value="女生">女</label></td>
                    <td>
                        你猜
                    </td>
                    <td>
                        <img src="bianji.png" alt="">
                        <img src="shanchu.png" alt="">
                    </td>
                  </tr>
                  <tr>
                    <th><input type="checkbox" name="category"/></th>
                    <th scope="row">3</th>
                    <td>Mark</td>
                    <td>19462358461</td>
                    <td><label><input type="radio" name="sex" value="男生">男</label>
                        <label><input type="radio" name="sex" value="女生">女</label></td>
                    <td>
                        你猜
                    </td>
                    <td>
                        <img src="bianji.png" alt="">
                        <img src="shanchu.png" alt="">
                    </td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
</body>
</html>